<template>
  <div class="team">
    <nav-top class="nav"
             Licon="more"
             Ricon="txtFind"
             Rtxt="添加队员"
             @callback="jumpAdd"></nav-top>
    <div id="main"
         v-if="teamList">
      <div class="content"
           v-for="(item, index) in teamList"
           :key="index"
           :class="['enable',{'actives':item.info.status==2}]">
        <div class="content_top">
          <div>
            <span class="uname">{{ item.info.name }}</span>
            <span class="uphone">{{ item.info.phone }}</span>
          </div>

          <div class="icon"
               @click="getEdit(index)">
            <img src="../../../assets/images/icon/icon_pianji.png" />
          </div>
        </div>
        <div class="content_price">
          ¥<span>{{ item.profit }}</span>
        </div>
        <div class="content_bottom">
          <span>额度：{{ item.info.vip_num }}</span>
          <span class="activation">已激活：{{ item.huiyuan_num }}</span>
          <span>学校：{{ item.school_num }}</span>
        </div>
      </div>
    </div>
    <div v-else
         class="tips">暂无队员</div>
  </div>
</template>

<script>
import { mapMutations, mapGetters } from 'vuex'

export default {
  name: 'Team',

  components: {},
  data() {
    return {
      teamList: []
    }
  },
  computed: {
    ...mapGetters(['teamItem', 'proxy_id'])
  },
  watch: {},
  methods: {
    ...mapMutations(['setTeamItem', 'setLeftScope']),
    // 点击跳转到编辑信息
    getEdit(index) {
      let obj_info = this.teamList[index]
      // console.log(obj_info);
      this.setTeamItem(obj_info)
      // console.log(this.teamItem);
      this.$router.push({ name: 'Edit' })
    },
    // 跳转到添加队员
    jumpAdd(val) {
      // console.log(val);
      if (val == 'txtFind') {
        this.$router.push('/admin/team/team_add')
      } else {
        this.setLeftScope(true)
      }
    },
    // 请求列表数据
    getDataList() {
      let params = {
        proxy_id: this.proxy_id,
        keyword: '',
        curr: 1,
        limits: 10
      }
      // console.log(params);
      this.Http.teamList(params).then(res => {
        // console.log(res)
        // let arr = []
        // res.list.map((val, idnex) => {
        //   if (val.info.status == 1) {
        //     let new_val = val
        //     arr.unshift(val)
        //   } else if (val.info.status == 2) {
        //     arr.push(val)
        //   }
        // })
        // console.log(arr)
        this.teamList = res.list
        // console.log(this.teamList);
      })
    }
  },
  created() {
    this.getDataList()
  },
  mounted() {}
}
</script>
<style lang="less" scoped>
#main {
  background-color: #f7f8fa;
  .content {
    width: 678px;
    height: 225px;
    border-radius: 20px;
    margin: 0px auto;
    box-sizing: border-box;
    padding: 34px 30px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;

    &:not(:last-child) {
      margin-bottom: 38px;
    }
    .content_top {
      color: #fff;
      display: flex;
      justify-content: space-between;
      align-items: center;
      .uname {
        font-size: 32px;
        font-family: PingFang SC;
      }
      .uphone {
        display: inline-block;
        font-size: 34px;
        font-family: Helvetica Neue;
        padding: 0 0 0 24px;
      }
      .icon {
        width: 38px;
        height: 38px;
        overflow: hidden;
        img {
          width: 100%;
        }
      }
    }
    .content_price {
      color: #fff;
      font-size: 28px;
      font-family: Helvetica Neue;
      span {
        font-weight: bold;
        font-size: 40px;
      }
    }
    .content_bottom {
      color: rgb(255, 255, 255);
      font-size: 24px;
      font-family: PingFang SC;
      .activation {
        padding: 0 41px;
      }
    }
  }
  .enable {
    background-color: #0297ff; /* 不支持线性的时候显示 */
    background-image: linear-gradient(to right, #0297ff, #14c8ff);
  }
  .actives {
    background-color: #f00; /* 不支持线性的时候显示 */
    background-image: linear-gradient(to right, #f00, #f00);
  }
}
.tips {
  font-size: 32px;
  text-align: center;
  margin-top: 100px;
}
.nav {
  background-color: #f7f8fa;
}
</style>
